<template>
  <div class="component" style="position: fixed">
    <el-container>
      <el-header style="height: 8vw; font-size: 5ex; margin-top: 1vw">
        <img src="../assets/images/bottomlogo.jpg" alt="" style="width: 10vw" />
        企业数智化信息平台</el-header
      >
      <el-main class="bgimg">
        <div style="height: 35vw">
          <div
            style="
              width: 400px;
              height: 400px;
              position: fixed;
              align-items: center;
              left: 40%;
              margin-top: 5vw;
              opacity: 0.9;
            "
          >
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                opacity: 0.9;
                background-color: white;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
              "
            >
              <div
                style="
                  background-color: white;
                  padding: 10px;
                  border-radius: 10px;
                  width: 300px;
                  height: 400px;
                "
              >
                <h2 style="margin-bottom: 20px">用户登录</h2>
                <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
                  <el-form-item
                    label="账户名"
                    prop="username"
                    style="margin-top: 50px"
                  >
                    <el-input
                      v-model="loginForm.username"
                      placeholder="请输入账户名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="密&emsp;码"
                    prop="password"
                    style="margin-top: 50px"
                  >
                    <el-input
                      v-model="loginForm.password"
                      type="password"
                      placeholder="请输入密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="handleLogin"
                      >登录</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer style="text-align: center; margin-top: 80px"
        >CopyRight @ 2022 胜佳软件</el-footer
      >
    </el-container>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import axios from "axios";
export default {
  setup() {},
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      imageUrls: [
        "../assets/images/bg-00.jpg",
        "../assets/images/bg-00.jpg",
        "../assets/images/bg-00.jpg",
      ],
      currentIndex: 0,
      timer: null,
    };
  },

  methods: {
    handleLogin() {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          console.log("提交前数据:", this.loginForm);
          this.submitLogin();
        } else {
          ElMessage.error("请输入正确的账户名和密码");
          return false;
        }
      });
    },
    async submitLogin() {
      try {
        const response = await this.loginRequest(this.loginForm);
        if (response.data.success) {
          ElMessage.success("登录成功");
          // this.$router.push("/home");
          this.$router
            .push("/home")
            .then(() => {
              console.log("✅ 跳转完成");
            })
            .catch((err) => {
              console.error("❌ 跳转失败:", err);
            });
          // 登录成功后的处理逻辑，例如跳转到首页
        } else {
          ElMessage.error("登录失败，请检查账户名和密码");
        }
      } catch (error) {
        ElMessage.error("请求出错，请稍后再试");
      }
    },
    loginRequest(data) {
      return axios.post("https://localhost:5005/api/login", data);
    },
  },
};
</script>

<style lang="scss">
.bgimg {
  width: 100vw;
  height: 600px;
  background-image: url("../assets/images/bg-00.jpg");

  // background-size: cover;
  padding: 0%;
  // position:fixed;
}
</style>